<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        a{
            color: #000;
            text-decoration: none;
        }
        a:hover{
            color: rebeccapurple;
        }

    </style>
</head>
<body>
    <h1>这是主标题</h1>
   <!--//onclick是事件类型--> 
   <!--alert 就是事件处理程序-->
    <!-- <button class="" onclick="alert('xixi')">修改</button>
     -->
     <button class="">修改</button>
</body>
<script>
    //1.查找事件员
    var btn=document.querySelector('button')
    //2.确定监听类型
    //2.1传统方式（缺点 只能绑定一个事件处理程序）
    // function show() {//具名函数 
    //     alert('笑喜了')
    // }
    // btn.onclick= function()  {//匿名函数
    //     alert('hengheng')
    // };
    //2.2 html新增方式(可以添加多个处理程序)
    function test(){
        var p=document.querySelector('h1')
        //对元素节点对象的innnerHTml innerTEext 属性赋值  可以修改标签内容
      //获取页面标签的文本内容
        //  var text=p.innerHTML 
        //var text=p.innerText
       //  console.log(text);
        p.innerHTML="<a href='#'>帅哥来了</a>"
        
    }
    btn.addEventListener("click",test);
    //移除事件监听
   // btn.removeEventListener('click',test)
</script>
</html>
